<template>
  <div style="background-color: #ffffff; height: 100vh; overflow-x: scroll">
    <div class="content">
      <div class="ui-container">
        <!-- 结果START -->
        <a-divider
          v-if="record.res"
          orientation="left"
          class="span-line"
          ref="resRef"
          orientationMargin="0"
          style="display: flex"
        >
          <img src="../../../assets/svg/queslib/result.svg" style="display: inline-block" />
          <span>结果信息</span>
        </a-divider>
        <div v-if="props.id">
          <a-row>
            <a-col :span="24" class="res-content">
              <a-descriptions>
                <a-descriptions-item label="状态" :labelStyle="labelStyle">
                  <DictLabel dictType="quesLib_plan_status" :dictValue="record.resStatus"
                /></a-descriptions-item>
                <a-descriptions-item label="创建人" :labelStyle="labelStyle">{{
                  record.creator?.userName
                }}</a-descriptions-item>
                <a-descriptions-item label="时间" :labelStyle="labelStyle">{{
                  record.createDate
                }}</a-descriptions-item>
                <a-descriptions-item label="确认人" :labelStyle="labelStyle">{{
                  record.auditor?.userName
                }}</a-descriptions-item>
                <a-descriptions-item label="确认时间" :labelStyle="labelStyle">{{
                  record.auditDate
                }}</a-descriptions-item>
                <a-descriptions-item label="意见" :labelStyle="labelStyle">{{
                  record.remarks
                }}</a-descriptions-item>
                <a-descriptions-item label="附件" :labelStyle="labelStyle">
                  <BasicUpload
                    v-model:value="record.dataMap"
                    :bizKey="props.id"
                    :bizType="'queslibRes_file'"
                    :uploadType="'file'"
                    :loadTime="record.__t"
                    :showPreview="true"
                    :emptyHidePreview="false"
                    :readonly="true"
                  />
                </a-descriptions-item>
              </a-descriptions>
              <a-divider style="border-color: #cccccc" />
              <div class="ccontent" v-html="record.ccontent"></div>
            </a-col>
          </a-row>
        </div>
        <!-- 结果END -->
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsQuesLibResViewForm',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, ref, watch, onMounted } from 'vue';
  import { DictLabel } from '/@/components/Dict';
  import { queslibResForm, QueslibRes } from '/@/api/quesLib/res/queslibRes';
  import { useDict } from '/@/components/Dict/src/useDict';
  import { BasicUpload } from '/@/components/Upload';
  const { initDict } = useDict();
  const props = defineProps({
    id: String,
  });
  watch(
    () => props.id,
    async () => {
      loadData();
    },
  );
  onMounted(async () => {
    await initDict(['quesLib_ques_step', 'quesLib_ques_type', 'quesLib_priority_level']);
  });
  const labelStyle = { 'font-weight': 'bold', 'font-size': '14px', color: '#606266' };
  const record = ref<QueslibRes>({} as QueslibRes);
  async function loadData() {
    const res = await queslibResForm({ id: props.id });
    record.value = (res.queslibRes || {}) as QueslibRes; //需修改
  }
</script>
<style lang="less" scoped>
  .ant-timeline-item-tail {
    position: absolute;
    top: 10px;
    left: 4px;
    height: calc(100% - 10px);
    border-left: 2px solid #aaa;
  }
  .ccontent {
    background-color: #eee;
    width: 100%;
    height: 100%;
  }
  .ui-container {
    background-color: #ffffff;
    width: 93%;
    min-width: 1100px;
    padding: 20px 20px;
    margin: 0 auto;
  }
  .tool {
    margin: 50px 50px;
    margin-top: 0;
    .btn {
      margin: 0 5px;
    }
  }
  .steptool {
    right: 80px;
    bottom: 160px;
    z-index: 999;
    margin-top: -60px;
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;

    button {
      margin: 5px 0;
      span {
        font-size: 16px;
        font-weight: bolder;
        font-family: 'Microsoft YaHei';
      }
    }
  }
  .span-line {
    // margin: 30px 0;
    color: #1951be;
    font-size: 28px;
    height: 63px;
    padding: 10px 0;
    background-color: #c9c9c941;
    @img-w: 40px;
    img {
      width: @img-w;
      height: @img-w;
      margin-right: 10px;
    }
    span {
      line-height: @img-w;
    }
  }
  .plan-content,
  .res-content {
    padding: 10px 20px;
  }
  .ant-descriptions-title {
    font-size: 28px !important;
  }
  .ant-divider {
    margin-top: 2px;
    margin-bottom: 10px;
  }
</style>
